<template>
    <div class="head">
        <el-menu :default-active="this.$route.path"
                 background-color="#40E0D0"
                 active-text-color="#545c64"
                 text-color="#fff"
                 mode="horizontal"
                 router
                 @select="handleSelect">
                <template v-for="item in items">
                    <el-menu-item :index="item.index" :key="item.index">
                        {{item.title}}
                    </el-menu-item>
                </template>
            <el-menu-item index="1">MV</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        props:['items'],
        name: "Head",
        data() {
            return {

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            contents(){

            }
        }
    }
</script>

<style scoped>
    /deep/ ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
        height: 35px;
        line-height: 35px;
        font-size: 0.8em;
        font-family: '微软雅黑';
    }

    .el-menu--horizontal > .el-submenu {
        float: none;
    }

    .el-menu--horizontal > .el-menu-item {
        float: none;
        line-height: 35px;
        height: 35px;
        font-size: 0.8em;
        font-family: '微软雅黑';
    }

    .el-menu--horizontal > .el-menu-item a {
        text-decoration: none;
    }

    .el-menu--horizontal > .el-menu-item a {
        text-decoration: none;
    }

    a:active {
        background-color: #00FA9A;
    }
    .head {
        min-width: 960px;
        position: sticky;
    }
</style>